<template>
    <div class="qilin-user">
        <Form ref="formSearch" :model="formSearch" inline :label-width="80">
            <FormItem label="用户名：" prop="userName">
                <Input type="text" v-model="formSearch.userName" placeholder="用户名"></Input>
            </FormItem>
            <FormItem label="手机号：" prop="phonenumber">
                <Input type="text" v-model="formSearch.phonenumber" placeholder="手机号"></Input>
            </FormItem>
            <FormItem style="float:right;">
                    <Button type="default" shape="circle" style="margin-right:10px;">重置</Button>
                    <Button type="primary" shape="circle">查询</Button>
            </FormItem>
        </Form>
        <Table border :data="tableConfig.data" :columns="tableConfig.columns" size="default"></Table>
    </div>
</template>
<script>
import {getUserDataList} from "@/api/index.js";
export default {
    data(){
        return{
            formSearch:{ //查询表单配置项
                userName:"",
                phonenumber:""
            },
            tableConfig:{
                data:[],
                columns:[
                    {
                        type:"index",
                        width:80,
                        align:"center",
                        title:"序号"
                    },
                    {
                        title:"用户名",
                        key:"userName",
                        align:"center"
                    },
                    {
                        title:"角色",
                        key:"roleId",
                        align:"center",
                        render:(h,options)=>{
                            if(options.row.roleId){
                                return h("span",null,"普通用户");
                            }else{
                                return h("span",null,"系统管理员");
                            };
                        }
                    },
                    {
                        title:"手机号",
                        key:"phonenumber",
                        align:"center"
                    },
                    {
                        title:"创建时间",
                        key:"createTime",
                        align:"center",
                        tooltip:true
                    },
                    {
                        title:"备注",
                        key:"remark",
                        align:"center",
                        tooltip:true
                    },
                    {
                        title:"操作",
                        fixed:"right",
                        width:250,
                        align:"center",
                        render:(h,options)=>{
                            return h("div",[
                                h("Button",{
                                    props:{
                                        type:"primary",
                                        size:"small"
                                    },
                                    style:{
                                        marginRight:"10px"
                                    },
                                    on:{
                                        click:()=>{
                                            this.viewData(options);
                                        }
                                    }
                                },"查看"),
                                h("Button",{
                                    props:{
                                        type:"warning",
                                        size:"small"
                                    },
                                    style:{
                                        marginRight:"10px"
                                    },
                                    on:{
                                        click:()=>{
                                            this.updateData(options);
                                        }
                                    }
                                },"修改"),
                                h("Button",{
                                    props:{
                                        type:"error",
                                        size:"small"
                                    },
                                    style:{
                                        marginRight:"10px"
                                    },
                                    on:{
                                        click:()=>{
                                            this.deleteData(options);
                                        }
                                    }
                                },"删除")
                            ])
                        }
                    }
                ]
            }
        }
    },
    methods:{
        // 点击查看按钮事件监听
        viewData(options){
            console.log(options);
        },
        // 点击修改按钮事件监听
        updateData(options){
            console.log(options);
        },
        // 点击删除按钮事件监听
        deleteData(options){
            console.log(options);
        },
        // 初始化获取用户列表数据事件监听
        getTableData(){
            getUserDataList().then((res)=>{
                // console.log(res);
                if(res.code === 200){
                    this.tableConfig.data=res.rows;
                };
            });
        }
    },
    mounted(){
        this.getTableData();
    }
}
</script>
<style lang="scss" scoped>
.qilin-user{
    width:100%;
    height:100%;
    >.ivu-form{
        overflow:hidden;
        background-color:#fff;
        padding:25px 15px 0 15px;
        margin-bottom:20px;
        border-radius:5px;
    }
}
</style>